<template>
  <div id="app">
    <div class="main">
      <div class="header">
        <h2>联机大厅</h2>
        <div class="nav">
          <button><router-link to="/"> 首页 </router-link></button>
        </div>
        <div class="user">
          <img :src="userStore.avatarUrl(userStore.user.avatar)" alt="" class="user_avatar" />
          <h2>{{ userStore.user.username }}</h2>
        </div>
      </div>
      <div class="center">
        <div class="rooms">
          <h2>房间列表</h2>
          <div class="createRoom">
            <input type="text" v-model="roomName" placeholder="请输入房间名" />
            <button @click="createRoom">创建房间</button>
          </div>
          <div class="roomList">
            <div class="room" v-for="item in gamestatus.rooms.filter((item) => item.roomName !== 'hide')" :key="item">
              <h3>{{ item.roomName }}</h3>
              <h3>{{ item.players.length }}/2</h3>
              <button @click="joinRoom(item.roomId)">加入房间</button>
            </div>
          </div>
        </div>
        <div class="players">
          <h2>在线玩家</h2>
          <div class="playerList">
            <div class="player" v-for="(item, index) in gamestatus.players" :key="item">
              <img :src="userStore.avatarUrl(onLineAvatar[index])" alt="" />
              <h2>{{ item.userName }}</h2>
              <span>{{ item.state }}</span>
              <button @click="invite({toUserId: item.userId})" v-if="item.state === '空闲中'">邀请</button>
              <button @click="invite({toUserId: item.userId})" v-else disabled>邀请</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { onMounted, ref, watch } from "vue";
import { useRouter } from "vue-router";
import useGamestatus from "../stores/game";
import { useUserStore } from "../stores/user";
import useNetStore from "../stores/net.js";

const gamestatus = useGamestatus();
let userStore = useUserStore();
let net = useNetStore();

//数据初始化
gamestatus.init();

let rooms = gamestatus.rooms;
const socket = gamestatus.socket;
const router = useRouter();

let roomName = ref("");
let onLineAvatar = ref([]);
const joinRoom = (roomId) => {
  console.log(`发送加入房间消息: ${roomId}`);
  socket.emit("joinRoom", { roomId: roomId, sid: gamestatus.sid, userId: userStore.user.userId });
};
const createRoom = () => {
  if (roomName.value.trim() === "") {
    alert("房间名不能为空");
    return;
  }
  console.log(`创建房间`, roomName.value);
  socket.emit("createRoom", roomName.value);
  roomName.value = "";
};
const invite = (data) => {
  let toUserId = data.toUserId;
  if(toUserId === userStore.user.userId){
    alert("不是，你邀请自己干嘛？？？");
    return;
  }
  gamestatus.socket.emit("createHideRoom",{userId:userStore.user.userId,toUserId:toUserId})
  console.log(`邀请${toUserId}加入房间`);
}
const getUserImg = () => {
  console.log("获取在线用户列表");
  net
    .get("/users/userTable")
    .then((res) => {
      if (res.code === 200) {
        console.log(res.data);
        gamestatus.players.forEach((item) => {
          let url = res.data.find((item2) => item2.userId === item.userId).avatar;
          console.log(url);
          onLineAvatar.value.push(url);
        });
      } else {
        console.log(res.msg || "获取用户列表失败");
      }
    })
    .catch((err) => {
      console.error(err);
    });
};
function abc() {
  console.log("abc");
  setTimeout(() => {
    if (gamestatus.players.length > 0) {
      getUserImg();
    } else {
      abc();
    }
  }, 100);
}
onMounted(() => {
  abc();
});
watch(
  gamestatus.players,
  () => {
    abc();
  },
  {
    deep: true,
    immediate: true
  }
);
</script>
<style scoped>
#app {
  width: 100vw;
  min-height: 100vh;
  background-color: #e0f2f1;
}

.main {
  width: 100%;
  padding: 8vh 8vw;
  display: flex;
  flex-direction: column;

  & > .header {
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: #4db6ac;
    padding: 15px 30px;
    border-radius: 10px;
    margin-bottom: 25px;
    box-shadow: 0 4px 12px rgba(77, 182, 172, 0.2);

    & > h2 {
      color: white;
      font-weight: 500;
    }

    & > .user {
      display: flex;
      align-items: center;

      & > img {
        width: 45px;
        height: 45px;
        border-radius: 50%;
        border: 2px solid white;
        margin-right: 10px;
        transition: all 0.3s;

        &:hover {
          transform: scale(1.1);
        }
      }

      & > h2 {
        color: white;
        font-size: 1.1rem;
      }
    }

    & > .nav {
      display: flex;
      gap: 15px;

      & > button {
        background-color: transparent;
        color: white;
        border: 1px solid white;
        padding: 8px 20px;
        border-radius: 20px;
        cursor: pointer;
        transition: all 0.3s;

        &:hover {
          background-color: rgba(255, 255, 255, 0.2);
          transform: translateY(-2px);
        }

        &:first-child {
          background-color: rgba(255, 255, 255, 0.1);
        }
      }
    }
  }

  & > .center {
    display: flex;
    gap: 20px;

    & > .rooms {
      flex: 7;
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

      & > h2 {
        color: #263238;
        margin-bottom: 20px;
        font-weight: 500;
      }

      & > .createRoom {
        display: flex;
        margin-bottom: 20px;
        gap: 10px;

        & > input {
          flex: 1;
          padding: 10px 15px;
          border: 1px solid #b0bec5;
          border-radius: 8px;
          font-size: 0.95rem;

          &:focus {
            outline: none;
            border-color: #4db6ac;
            box-shadow: 0 0 0 2px rgba(77, 182, 172, 0.2);
          }
        }

        & > button {
          padding: 10px 25px;
          background-color: #4db6ac;
          color: white;
          border: none;
          border-radius: 8px;
          cursor: pointer;
          transition: all 0.3s;

          &:hover {
            background-color: #26a69a;
            transform: translateY(-2px);
            box-shadow: 0 4px 8px rgba(77, 182, 172, 0.3);
          }
        }
      }

      & > .roomList {
        max-height: 50vh;
        overflow-y: auto;
        padding-right: 5px;
        scrollbar-width: thin;
        scrollbar-color: #4db6ac white;
        & > .room {
          background-color: white;
          border: 1px solid #eceff1;
          border-radius: 8px;
          padding: 15px;
          margin-bottom: 12px;
          transition: all 0.3s;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            border-color: #80deea;
          }

          & > button {
            padding: 6px 15px;
            background-color: #ff7043;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;

            &:hover {
              background-color: #f4511e;
              transform: scale(1.05);
            }
          }
        }
      }
    }

    & > .players {
      flex: 3;
      background-color: white;
      border-radius: 12px;
      padding: 20px;
      box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);

      & > h2 {
        color: #263238;
        margin-bottom: 20px;
        font-weight: 500;
      }

      & > .playerList {
        max-height: 50vh;
        overflow-y: auto;
        padding-right: 5px;
        scrollbar-width: thin;
        scrollbar-color: #4db6ac white;

        & > .player {
          display: flex;
          align-items: center;
          padding: 12px 15px;
          margin-bottom: 12px;
          background-color: white;
          border: 1px solid #eceff1;
          border-radius: 8px;
          box-shadow: 0 2px 6px rgba(0, 0, 0, 0.05);
          transition: all 0.3s;
          position: relative;

          &:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.1);
            border-color: #80deea;
          }

          & > img {
            width: 40px;
            height: 40px;
            border-radius: 50%;
            margin-right: 12px;
            border: 2px solid #e0f2f1;
            transition: all 0.3s;
          }

          & > h2 {
            flex: 1;
            font-size: 0.95rem;
            color: #263238;
            font-weight: 500;
          }

          & > span {
            font-size: 0.85rem;
            color: #78909c;
            margin-right: 12px;
            padding: 2px 8px;
            border-radius: 12px;
            background-color: #eceff1;
          }

          & > button {
            padding: 6px 15px;
            background-color: #4db6ac;
            color: white;
            border: none;
            border-radius: 6px;
            cursor: pointer;
            transition: all 0.3s;
            font-size: 0.85rem;

            &:hover {
              background-color: #26a69a;
              transform: scale(1.05);
            }

            &:disabled {
              background-color: #cfd8dc;
              cursor: not-allowed;
              transform: none;
            }
          }
        }
      }
    }
  }
}
</style>
